<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <link rel="stylesheet" href="example/ellipsis.css" />
        <title>Simply Ellipsis</title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }

            html,
            body {
                width: 100%;
                height: 100%;
                padding: 0;
                margin: 0;
                color: #333;
                position: relative;
            }

            .item-2 {
                width: 100px;
                border: 1px solid #999;
                padding: 0 10px;
                border-radius: 4px;
                position: absolute;
                z-index: 200;
            }

            .item {
                width: 50px;
                border: 1px solid #999;
                padding: 0 10px;
                border-radius: 4px;
                margin: 20px;
            }
            .item:hover {
                background-color: gray;
            }

            .example-1 {
            }

            .example-2 {
                width: 500px;
                height: 200px;
                border: 1px solid gray;
                margin-top: 20px;
                overflow: hidden;
            }
            .example-3 {
                width: 500px;
                height: 200px;
                border: 1px solid gray;
                margin-top: 20px;
                overflow: hidden;
            }
            .example-3 .item {
                width: 100px;
            }
            ul > li {
                margin-bottom: 10px;
            }
            .example-4 {
                width: 400px;
            }
            .svg-hover:hover {
                opacity: 0.5;
                cursor: pointer;
            }
        </style>
    </head>
    <body id="app" style="position: relative">
        <div
            style="
                width: 100%;
                display: flex;
                flex-direction: column;
                justify-content: flex-start;
                align-items: center;
                position: relative;
                z-index: 100;
                padding-bottom: 20px;
            "
        >
            <div class="ell-t item-2" style="left: 0; top: 0">设置为ell-t,强制更改为ell-b的效果</div>
            <div class="ell-r item-2" style="right: 0; top: 0">设置为ell-r,强制更改为ell-l的效果</div>
            <div class="ell-l item-2" style="left: 0; bottom: 0">设置为ell-l,强制更改为ell-r的效果</div>
            <div class="ell-b item-2" style="right: 0; bottom: 0">设置为ell-b,强制更改为ell-t的效果</div>

            <h1 style="padding-top: 30px">simply-ellipsis功能在线预览</h1>
            <h3 id="currentTime" style="padding-top: 20px; color: dodgerblue"></h3>
            <h3 style="margin-top: 20px; color: red">4.x.x版本重大更新</h3>
            <ol style="font-size: 16px; padding: 20px; border: 1px solid red">
                <li>调整tooltip框实现方式，使其支持自定义边框样式设置</li>
                <li>内置了element plus的dark风格与light风格，默认为dark风格</li>
                <li>切换方式为ellipsis.setObserver('app','element-light')</li>
                <li
                    >自定义tooltip样式方式做了调整，详见
                    <span style="font-weight: bolder">
                        <a
                            style="padding-top: 20px"
                            href="https://www.npmjs.com/package/simply-ellipsis"
                            target="_blank"
                        >
                            说明文档
                        </a> </span
                    >第3点</li
                >
                <li>解决fireFox下的兼容性问题</li>
            </ol>
            <h4 style="margin-top: 20px">功能简介：</h4>
            <ol>
                <li>tooltip超出边界时自动调整其位置，保证提示框在视界内</li>
                <li>可配置单行是否超长才提示</li>
                <li>可配置多行提示</li>
                <li>可自定义提示内容</li>
            </ol>
            <div style="padding-top: 10px; font-size: 18px">
                点击这里，查看详细
                <span style="font-weight: bolder">
                    <a style="padding-top: 20px" href="https://www.npmjs.com/package/simply-ellipsis" target="_blank">
                        说明文档
                    </a></span
                >
            </div>
            <h3 style="padding-top: 10px">欢迎进群建议，提改进需求<span style="color: red">QQ群号：523987240</span></h3>
            <h3 style="padding-top: 20px">下面对四个功能进行演示，鼠标悬浮元素上方查看</h3>

            <section>
                <h5 style="padding-top: 5px"
                    >1.演示四个角落tooltip超出边界时，tooltip自动调整其位置，保证提示框在视界内</h5
                >
                <div>将鼠标悬浮在四个角落的元素上里查看,使用方式为添加class:"ell-t、ell-b、ell-r、ell-l"</div>
            </section>

            <section>
                <h5 style="text-align: center; padding-top: 20px">2.演示单行文字超长情况下进行提示</h5>
                <div>使用方式为添加class:"ell-t、ell-b、ell-r、ell-l"</div>
                <div class="example-2">
                    <div style="display: flex; justify-content: center">
                        <div class="ell-t item">顶部ell-t</div>
                    </div>
                    <div style="display: flex; justify-content: space-between">
                        <div class="ell-l item">左侧ell-l</div>
                        <div class="ell item" style="width: 130px">未超长，不提示</div>
                        <div class="ell-r item">右侧ell-r</div>
                    </div>
                    <div style="display: flex; justify-content: center">
                        <div class="ell-b item">底部ell-b</div>
                    </div>
                </div>
            </section>

            <section>
                <h5 style="text-align: center; padding-top: 20px">3.演示单行、多行无论是否超长均提示</h5>
                <div>使用方式为添加class:"ell-a-t、ell-a-b、ell-a-r、ell-a-l","a"代表always</div>
                <div class="example-3">
                    <div style="display: flex; justify-content: center">
                        <div class="ell-a-t item">顶部ell-a-t</div>
                    </div>
                    <div style="display: flex; justify-content: center">
                        <div class="ell-a-l item">左侧ell-a-l</div>
                        <div class="ell-a-t item" style="white-space: pre-wrap">顶部多行不超长提示ell-a-t</div>
                        <div class="ell-a-r item">右侧ell-a-r</div>
                    </div>
                    <div style="display: flex; justify-content: center">
                        <div class="ell-a-b item">底部ell-a-b</div>
                    </div>
                </div>
            </section>
            <section>
                <h5 style="text-align: center; padding-top: 20px"
                    >4.演示自定义提示，即提示内容与显示内容不一致，还可应用于图标</h5
                >
                <div>使用方式为添加class:"ell-a-t、ell-a-b、ell-a-r、ell-a-l","a"代表always</div>
                <div style="display: flex">
                    <div class="ell-a-l item" style="width: 100px" ell-value="文字内容自定义">右侧ell-a-l</div>
                    <div class="ell-a-l item" ell-value="文字内容自定义">右侧ell-a-l</div>
                    <div class="ell-a-r" ell-value="这是一个自定义内容的tooltip"
                        ><svg width="50" height="50" viewBox="0 0 1024 1024" class="svg-hover">
                            <path
                                fill="currentColor"
                                d="M512 64a448 448 0 1 1 0 896 448 448 0 0 1 0-896zm23.744 191.488c-52.096 0-92.928 14.784-123.2 44.352-30.976 29.568-45.76 70.4-45.76 122.496h80.256c0-29.568 5.632-52.8 17.6-68.992 13.376-19.712 35.2-28.864 66.176-28.864 23.936 0 42.944 6.336 56.32 19.712 12.672 13.376 19.712 31.68 19.712 54.912 0 17.6-6.336 34.496-19.008 49.984l-8.448 9.856c-45.76 40.832-73.216 70.4-82.368 89.408-9.856 19.008-14.08 42.24-14.08 68.992v9.856h80.96v-9.856c0-16.896 3.52-31.68 10.56-45.76 6.336-12.672 15.488-24.64 28.16-35.2 33.792-29.568 54.208-48.576 60.544-55.616 16.896-22.528 26.048-51.392 26.048-86.592 0-42.944-14.08-76.736-42.24-101.376-28.16-25.344-65.472-37.312-111.232-37.312zm-12.672 406.208a54.272 54.272 0 0 0-38.72 14.784 49.408 49.408 0 0 0-15.488 38.016c0 15.488 4.928 28.16 15.488 38.016A54.848 54.848 0 0 0 523.072 768c15.488 0 28.16-4.928 38.72-14.784a51.52 51.52 0 0 0 16.192-38.72 51.968 51.968 0 0 0-15.488-38.016 55.936 55.936 0 0 0-39.424-14.784z"
                            ></path></svg
                    ></div>
                    <div></div>
                </div>
            </section>
            <section>
                <h5 style="text-align: center; padding-top: 20px">5.演示多行仅超长时进行提示</h5>
                <div> 使用方式 为设置class与style="--ell-line:Number"，Number用于指定行数;</div>
                <div> 3.x使用方式为添加class:"ell-m-t、ell-m-b、ell-m-r、ell-m-l",</div>
                <div>m代表multiply,同时兼容2.x的使用方式;</div>
                <div> 2.x以前版本使用方式为添加class:"elln-t、elln-b、elln-r、elln-l"; </div>
                <h5 style="margin-top: 10px">设置2行超长省略</h5>
                <div class="example-4 elln-b" style="--ell-line: 2">
                    设置2行超长省略。Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur culpa dolores11111
                </div>
                <h5 style="margin-top: 10px">设置3行超长省略时，自定义提示内容</h5>
                <div class="example-4 ell-m-r" style="--ell-line: 3" ell-value="我是自定义内容">
                    设置为3行超长省略。Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur culpa
                    dolores ipsum iusto maxime nihil, nostrum nulla omnis quis ratione sed sequi suscipit?
                </div>
                <h5 style="margin-top: 10px">设置4行超长省略，由于未超长，不出现tooltip</h5>
                <div class="example-4 ell-m-b" style="--ell-line: 4">
                    设置为4行超长省略，由于未超长，故不出现tooltip。Lorem ipsum dolor sit amet, consectetur adipisicing
                    elit. Consequatur culpa dolores ipsum iusto maxime nihil, nostrum nulla?
                </div>
            </section>

            <h5 style="padding-top: 20px">5.重点说明</h5>
            <div style="width: 800px; padding-top: 20px">
                <ul>
                    <li
                        >需要注意的情况是，全局监听的方式，无法监听到style="display:none"的变化，由此导致tooltip不生效，解决方式详见
                        <span style="font-weight: bolder">
                            <a
                                style="padding-top: 20px"
                                href="https://www.npmjs.com/package/simply-ellipsis"
                                target="_blank"
                            >
                                说明文档
                            </a></span
                        >第6部分疑难解答
                    </li>
                </ul>
                <ul>
                    <li
                        >整理了tooltip相关样式，便于各位开发者进行自定义tooltip样式，详见
                        <span style="font-weight: bolder">
                            <a
                                style="padding-top: 20px"
                                href="https://www.npmjs.com/package/simply-ellipsis"
                                target="_blank"
                            >
                                说明文档
                            </a>
                        </span>
                        第3部分关于自定义样式的说明</li
                    >
                </ul>
            </div>
        </div>
    </body>
    <!--    发布版代码-->
        <script src="dist/simply-ellipsis.min.js"></script>
    <script>
        let dom = document.getElementById('currentTime')
        dom.innerText = new Date().toLocaleString()
        setInterval(() => {
            dom.childNodes[0].data = new Date().toLocaleString()
        }, 1000)

        window.addEventListener('load', () => {
            ellipsis.setEll()
            ellipsis.setObserver('app', 'element-light')
        })
    </script>

    <!--        调试用代码-->
    <!--        <script type="module">-->
    <!--            import ellipsis from './src/main.js'-->

    <!--            window.addEventListener('load', () => {-->
    <!--                ellipsis.setEll()-->
    <!--                ellipsis.setObserver('app')-->
    <!--                // ellipsis.setObserver('app','element-light')-->
    <!--            })-->
    <!--        </script>-->
</html>
